
<template>
  <div id="map">
    <magic-header titleName="地图" v-if="!isWxPublic"></magic-header>
    <!-- start 地图-->
		<div id="baiduMap">
		</div>
		<!-- end 地图 -->
  </div>
</template>
<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import wx from "weixin-js-sdk";
import VueJsonp from "vue-jsonp";
import getLocation from "services/get-location";
export default {
  name: "shop-nearby",
  data() {
    return {
      positionObj: [],
      latitude: "",
      longitude: "",
      isWxPublic: false
    };
  },
  created() {
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
    }
    if (this.$route.params.mapParams === undefined) {
      this.positionObj = this.$.getAttr("positionObj");
    } else {
      this.positionObj = this.$route.params.mapParams;
      this.$.setAttr("positionObj", this.$route.params.mapParams);
    }
  },
  methods: {
    //创建当前位置坐标点
    createMarker(positionObj) {
      console.log(positionObj)
      console.log(this)
      console.log(this.latitude)
      console.log(this.longitude+'------')
      // 创建Map实例
      var map = new BMap.Map("baiduMap");
      let latitude = this.latitude;
      var longitude = this.longitude;
      var point = new BMap.Point(latitude, longitude);
      console.log(point)
      var myIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
        scale: 1, //图标缩放大小
        fillColor: "#1296db", //填充颜色
        fillOpacity: 1 //填充透明度
      });
      var marker2 = new BMap.Marker(point, {
        icon: myIcon
      });
      // 创建标注
      var label = new BMap.Label("我的位置", {
        offset: new BMap.Size(-15, 25)
      });
      //设置文本
      marker2.setLabel(label);
      var city = this.$.nowCity;
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(
        city,
        function(point) {
          if (point) {
            map.centerAndZoom(point, 11);
          }
        },
        city
      );
      this.positionObj.forEach(item => {
        if (!item.route) {
          //是否显示交通路线
          this.eachCraeteMarker(map, item);
          map.addOverlay(marker2);
        } else {
          var startPonit = point;
          var endPoint = new BMap.Point(item.longitude, item.latitude);
          this.getRoute(map, startPonit, endPoint);
        }
      });
    },
    //循环多个店铺坐标点
    eachCraeteMarker(map, positionObj) {
      map.centerAndZoom(
        new BMap.Point(positionObj.longitude, positionObj.latitude),
        11
      ); // 初始化地图,设置中心点坐标和地图级别
      this.addMarker(
        map,
        positionObj.longitude,
        positionObj.latitude,
        positionObj.name,
        positionObj.id
      );
    },
    //创建多个标点
    addMarker(map, lng, lat, name, id) {
      var point = new BMap.Point(lng, lat);
      var myIcon2 = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
        scale: 1, //图标缩放大小
        fillColor: "#f00", //填充颜色
        fillOpacity: 1 //填充透明度
      });
      var marker = new BMap.Marker(point, {
        icon: myIcon2
      });
      marker.addEventListener(
        "click",
        function() {
          this.goToShopAbout(name);
        }.bind(this)
      );
      map.addOverlay(marker);
      var label = new BMap.Label(name, {
        offset: new BMap.Size(-15, 25)
      }); //设置文本
      marker.setLabel(label);
    },
    getRoute(map, start, end) {
      //生成交通路线图
      console.log(map)
      console.log(start)
      console.log(end)
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
          map: map,
          autoViewport: true
        }
      });
      driving.search(start, end);
    },
    //跳转到详情界面
    goToShopAbout(name) {
      this.$router.replace({
        name: "shop_about",
        params: {
          shopName: name
        }
      });
    },
    getSign() {
      let signHref = location.href.split("#")[0];
      let signOpenId = this.$.state;
      let signUrlInfo = encodeURIComponent(signHref);
      let signData = {
        clientType: "3",
        methodName: "QueryJssdkConfig",
        shopId: "",
        userId: "",
        urlInfo: signUrlInfo,
        wechatOpenId: signOpenId
      };
      this.$.wxGet(signData).then(res => {
        var res = res.data;
        wx.config({
          debug: true,
          appId: "wx195166055e5eddb2",
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ["getLocation"]
        });
      });
    },
    getPosition() {
      if (this.$.isWechat) {
        let getAdd = new BMap.Geolocation();
        let vm = this;
        getAdd.getCurrentPosition(
          function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              console.log("您的位置：" + r.point.lng + "," + r.point.lat);
              getLocation.getAdd(r.point.lng, r.point.lat).then(res => {
                alert(JSON.stringify(res));
                console.log(res)
                vm.longitude = res[0].x;
                vm.latitude = res[0].y;
                vm.createMarker(vm.positionObj);
              });
            }
          },
          { enableHighAccuracy: true }
        );
      } else {
        let vm = this;
        this.$.push("data_getLatLng", {}, res => {
          alert(JSON.stringify(res));
          res = JSON.parse(res);
          this.latitude = parseFloat(res.latitude);
          this.longitude = parseFloat(res.longitude);
          let lat = this.latitude.toFixed(6);
          let log = this.longitude.toFixed(6);
          this.latitude = log;
          this.longitude = lat;
          // getLocation.getAdd(this.latitude,this.longitude).then(res=>{
          // alert(JSON.stringify(res))
          // vm.longitude = res[0].x;
          // vm.latitude = res[0].y;
          vm.createMarker(vm.positionObj);
          // })
        });
      }
    }
  },
  mounted() {
    this.getPosition();
    //必须在mounted中初始化百度地图不然会报错因为js文件还没有引入
  },
  components: {
    magicHeader
  }
};
</script>
<style scoped="scoped">
#baiduMap {
  width: 100%;
  height: calc(100vh - 44px);
  line-height: 200px;
  text-align: center;
}
.icon-xiala-copy {
  position: absolute;
  height: 44px;
  line-height: 44px;
}
</style>